<template>
  <div class="detail-comment" v-if="comments.length > 0">
    <tag tag="评价" />
    <!--    <p>暂无评价</p>-->
    <div class="list">
      <div class="list-item" v-for="(item, index) in comments" :key="index">
        <div class="time">评论时间: {{item.create_time}}</div>
        <div class="user" v-if="item.user">
          <div class="avatar">
            <img :src="item.user.avatar" />
          </div>
          <div class="nickname">{{item.user.nickname}}</div>
        </div>
        <div class="images" v-if="item.path && item.path.length > 0">
          <div class="img" v-for="(o, i) in item.path" :key="i">
            <img :src="o" />
          </div>
        </div>
        <div class="content"><span>评论: </span>{{item.content}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Tag from './Tag'
import api from '@/api'
import base64 from '@/util/base64'
export default {
  name: 'DetailComment',
  props: {
    detail: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  components: { Tag },
  data() {
    return {
      // todo 可以做一个按钮查看全部,
      limit: 50,
      comments: []
    }
  },
  methods: {
    getComment() {
      api.Product.comment({ product_id: this.$route.params.id, limit: this.limit }).then(response => {
        let { data } = response
        data = base64.parse(data)
        this.comments = data.list
        // console.log(this.comments)
      }).finally(() => {
      })
    }
  },
  created() {
    this.getComment()
  }
}
</script>

<style scoped lang="stylus">
.detail-comment
  margin 10px
  padding 10px
  background white
  border-radius 10px
  text-align left
  p
    line-height 22px
  .list
    display flex
    flex-direction column
    .list-item
      margin-bottom 10px
      .user
        display flex
        align-items center
        .avatar
          width 60px
          //background red
          img
            width 50px
            height 50px
            border-radius 50%
        .nickname
          flex 1
          //background black
          height 20px
          line-height 20px
          overflow hidden
          font-weight 700
      .images
        //background red
        padding 10px 0
        display flex
        flex-wrap wrap
        .img
          width 100px
          padding-right 10px
          img
            display block
            margin auto
            width auto
            height auto
            max-width 100%
            max-height 100%
      .content
        margin-top 5px
        margin-bottom 20px
        line-height 1.5em
        span
          font-weight 700
          padding-right 10px
      .time
        margin 10px 0
        color #ccc
        font-weight 700
</style>
